<template>
	<view>
		<view class="bg-top"></view>
		<view class="content">
			<view class="card">
				<view class="calling-card">
					<view class="info">
						<view class="avatar">
							<image src="/static/image/logo.gif"></image>
						</view>
						<view class="summary-wrap">
							<view class="summary">
								<view class="essential">
									<text class="name">张老师</text>
									<view class="level-sign">LV</view>
									<text class="grade">9</text>
								</view>
								<view class="present">当前学情分：8000</view>
							</view>
							<view class="score">
								<view class="count">总学情分：<text class="count-num">12000</text></view>
								<view class="today">今日获得：80</view>
							</view>
						</view>
					</view>
					<view>
						<view class="level">
							<text>Lv<text class="level-num"> 6</text></text>
							<text>Lv<text class="level-num"> 7</text></text>
						</view>
						<view class="progress">
							<progress percent="30" backgroundColor="#EFEFEF" activeColor="#FF9900" stroke-width="10"></progress>
						</view>
						<view class="distance">
							<text>10000</text>
							<text class="point">距离下个等级还差8000学情分</text>
							<text>20000</text>
						</view>
					</view>
				</view>
				<view class="detail">查看会员等级详情 ></view>
			</view>
			<view class="card">
				<view class="title">成长任务</view>
				<navigator hover-class="none" class="line" url="sign">
					<view class="bg-icon"><text class="iconfont iconqiandao i-line"></text></view>
					<view class="indicator">
						<text class="indicate">每日签到</text>
						<text class="point">前往签到 ></text>
					</view>
				</navigator>
				<view class="line">
					<view class="bg-icon"><text class="iconfont iconchongzhi i-line"></text></view>
					<view class="indicator">
						<text class="indicate">充值</text>
						<text class="point">前往充值 ></text>
					</view>
				</view>
				<!-- <view class="line">
					<view class="bg-icon"><text class="iconfont iconkaoshi i-line"></text></view>
					<view class="indicator">
						<text class="indicate">他人使用试题</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
		background: #FAFAFA;
		position: absolute;
		z-index: -2;
	}

	.bg-top {
		position: absolute;
		z-index: -1;
		top: 0;
		height: 320upx;
		width: 100%;
		background: #FF9900;
	}

	.content {
		border-top: 1px solid #FF9900;
	}

	.card {
		margin: 50upx 30upx 30upx;
		border-radius: 10px;
		box-shadow: 0px 1px 4px rgba(0, 74, 56, 0.08);
		background: #fff;
	}

	.calling-card {
		padding: 40upx;
	}

	.info {
		display: flex;
		align-items: center;
	}

	.info .summary-wrap {
		margin-left: 20upx;
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 80upx;
		height: 80upx;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.essential {
		display: flex;
		align-items: center;
	}

	.essential .name {
		font-size: 36upx;
		font-weight: bold;
		color: #666;
	}

	.level-sign {
		color: #FFFFFF;
		width: 40upx;
		height: 40upx;
		line-height: 44upx;
		background-color: #FFCE00;
		font-size: 24upx;
		border-radius: 50%;
		margin-left: 12upx;
		text-align: center;
		border: 2upx solid #FFFFFF;
		z-index: 1;
	}

	.level-sign image {
		width: 100%;
	}

	.grade {
		padding: 0 16upx 0 20upx;
		height: 29upx;
		line-height: 29upx;
		background: #FFCE00;
		color: #fff;
		font-size: 26upx;
		margin-left: -10upx;
		margin-top: 4upx;
	}

	.present,
	.today {
		color: #999;
		font-size: 26upx;
	}

	.count {
		color: #666;
		font-size: 26upx;
	}

	.count-num {
		font-size: 36upx;
		color: #FF9900;
	}

	.level {
		display: flex;
		justify-content: space-between;
		font-size: 26upx;
		color: #333;
	}

	.level .level-num {
		color: #333;
		font-size: 40upx;
	}

	.progress {
		margin: 10upx 0;
		border-radius: 5px;
		overflow: hidden;
	}

	.distance {
		display: flex;
		justify-content: space-between;
	}

	.distance .point {
		color: #999;
	}

	.detail {
		height: 80upx;
		line-height: 80upx;
		border-top: 1px solid #E5E5E5;
		font-size: 26upx;
		color: #FF9900;
		text-align: center;
	}

	.card .title {
		padding: 20upx 40upx;
		font-size: 34upx;
		font-weight: bold;
		color: #333;
	}

	.card .line {
		padding: 20upx 40upx;
		display: flex;
		border-top: 1px solid #E5E5E5;
	}

	.line .indicator {
		margin-left: 20upx;
		display: flex;
		justify-content: space-between;
		flex: 1;
		align-items: center;
	}

	.line .bg-icon {
		width: 68upx;
		height: 68upx;
		background: rgba(255, 153, 0, 0.08);
		border-radius: 4px;
		text-align: center;
	}

	.line .i-line {
		font-size: 50upx;
		line-height: 68upx;
		color: #FF9900;
	}

	.line .indicate {
		font-size: 32upx;
		color: #333;
	}

	.line .point {
		font-size: 26upx;
		color: #CCC;
	}
</style>
